<!doctype html>
<html class="no-js">

<head>
    <title>确认订单</title>
    <#include "/res/components/meta.html" />
    <#include "/res/components/stylesheets.html" />
    <link rel="stylesheet" type="text/css" href="/res/stylesheets/orderConfirm.css?v=3">
</head>

<body>
    <div id="app">
        <ul class="am-avg-sm-4 top-now">
            <li>
                <div class="now">选择商品</div>
            </li>
            <li>
                <div class="now">选择团购</div>
            </li>
            <li>
                <div class="now">确定订单</div>
            </li>
            <li>
                <div>完成支付</div>
            </li>
        </ul>
        <!-- <form class="am-form" action=""> -->
        <!-- <input type="text" name="orderNo" value=""> -->
        <fieldset>
            <div class="am-panel am-panel-default">
                <div class="am-panel-hd">订单信息</div>
                <div class="am-panel-bd">
                    <div class="order-content-container">
                        <div>商品名称</div>
                        <div>
                            <#list products as item>
                                <a href="/tg/product/getProductById?id=${item.id!''}">
                                    <div class="am-g order-item-product">
                                        <div class="am-u-sm-3 order-item-product-cover fakecrop">
                                            <img src="${item.cover!}" />
                                        </div>
                                        <div class="am-u-sm-9 order-item-product-name">
                                            <div>${item.name!}</div>
                                            <div>${item.desc!}</div>
                                        </div>
                                    </div>
                                </a>
                            </#list>
                        </div>
                    </div>
                    <div class="order-id-container">
                        <span>订单编号</span>
                        <span>${(order.outTradeNo)!''}</span>
                    </div>
                    <div class="order-time-container">
                        <span>下单时间</span>
                        <span>${(order.startTime?string('yyyy-MM-dd HH:mm'))}</span>
                    </div>
                </div>
            </div>
            <div class="am-panel am-panel-default">
                <div class="am-panel-hd">支付信息</div>
                <div class="am-panel-bd">
                    <div class="order-price-container">
                        <span>订单金额</span>
                        <span>￥${(order.totalFee/100.0)!''}</span>
                    </div>
                </div>
            </div>
            <div class="am-panel am-panel-default address">
                <div class="am-panel-hd">收货地址</div>
                <!-- <div class="address-container am-g" data-am-modal="{target: '#addressSelector'}"> -->
                <div class="address-container am-g" @click="goAddressList">
                    <div class="am-u-sm-1">
                        <i class="am-icon-map-marker"></i>
                    </div>
                    <div class="am-u-sm-11">
                        <div class="address-name">
                            <span>{{ addressName }}</span>
                            <span>{{ addressPhone }}</span>
                        </div>
                        <div class="address-info">
                            <span>地址：{{ address }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom-tips">
                <span>请在 15 分钟内支付订单。</span>
            </div>
            <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default bottom-bar">
                <button type="submit" class="am-btn am-btn-primary" id="next-button" @click='onFakePay(orderCode)'>确认支付</button>
            </div>
        </fieldset>
        <!-- </form> -->
        <div class="am-modal-actions" id="addressSelector">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">请选择收货地址</li>
                    <#if addressList??>
                        <#list addressList as item>
                            <li>
                                <a href="javascript:" @click="selectAddress('${(item.id)!}', '${(item.name)!}', '${(item.tel)!}', '${(item.address)!}')">
                                    <div>
                                        <div class="address-name-popup">
                                            <span>${(item.name)!''}</span>
                                            <span>${(item.tel)!''}</span>
                                        </div>
                                        <div class="address-info-popup">
                                            <span>地址：${(item.address)!''}</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </#list>
                    </#if>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button>
            </div>
        </div>
    </div>
    <#include "/res/components/scripts.html" />
    <#include "/res/components/http.html" />
    <#include "/res/components/wxConfig.html" />
    <script type="text/javascript" src="http://lib.h-ui.net/jquery.cookie/1.4.1/jquery.cookie.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            addressId: "${(address.id)!''}",
            addressName: "${(address.name)!''}",
            addressPhone: "${(address.tel)!''}",
            address: "${(address.address)!''}",
            orderCode: "${orderCode!''}"
        },
        created: function() {
            //this.questionContent = $.cookie('questionContent')
            //this.masterId = $.cookie('masterId')
            // this.content = questionContent
        },
        mounted: function() {},
        methods: {
            onFakePay: function(orderCode) {
                if (this.addressName == '' || this.addressPhone == '' || this.address == '') {
                    alert('请完善地址信息！');
                    return;
                }
                var address = this.addressName + ' ' + this.addressPhone + ' ' + this.address
                window.location.href = '/order/payResult?code=' + orderCode + '&address=' + address;
                /*var param = {
                    orderNo: orderNo
                }
                fly.request('/fd/fakePay', param, {
                        method: "post",
                    })
                    .then(function(response) {
                        layer.closeAll();
                        var status = response.data.status
                        if (status == 200) {
                            var orderNo = response.data.info
                            window.location.href = '/fd/orderStatus/' + orderNo;
                            return;
                        } else {
                            var msg = response.data.msg
                            layer.open({
                                content: msg,
                                btn: '我知道了'
                            });
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });*/
                // window.location.href = "/tg/order/toPay?orderId=" + this.orderId + "&groupId=" + this.groupId +
                // "&name=" + this.addressName + "&tel=" + this.addressPhone + "&address=" + this.address;
            },
            selectAddress: function(addressId, name, tel, address) {
                this.addressId = addressId;
                this.addressName = name;
                this.addressPhone = tel;
                this.address = address;
                var $modal = $('#addressSelector');
                $modal.modal('close');
            },
            goAddressList: function() {
                var self = this;
                wx.openAddress({
                    success: function(res) {
                        /*var userName = res.userName; // 收货人姓名
                        var postalCode = res.postalCode; // 邮编
                        var provinceName = res.provinceName; // 国标收货地址第一级地址（省）
                        var cityName = res.cityName; // 国标收货地址第二级地址（市）
                        var countryName = res.countryName; // 国标收货地址第三级地址（国家）
                        var detailInfo = res.detailInfo; // 详细收货地址信息
                        var nationalCode = res.nationalCode; // 收货地址国家码
                        var telNumber = res.telNumber; // 收货人手机号码*/
                        self.address = res.provinceName + res.cityName + res.countryName + res.detailInfo;
                        self.addressName = res.userName;
                        self.addressPhone = res.telNumber;

                    }
                });
            }
        }
    })
    wx.ready(function() {
        initWXShare()
    })
    </script>
</body>

</html>